import React, { Component } from 'react'

class App extends Component {
  todos = []

  addTodo = (item) => {
    this.todos.push(item)
    this.forceUpdate()
  }

  onEnter = (evt) => {
    // 回车提交
    if ('Enter' == evt.key) {
      this.addTodo({
        id: Date.now(),
        value: evt.target.value
      })
      evt.target.value = ''
    }
  }

  render() {
    return (
      <div>
        <div>
          {/* 
            react事件它会自动给映射一个event事件对象
            此event事件对象它是进行了兼容处理，合成事件对象
            如果你还要原生event事件对象 event.nativeEvent
          */}
          <input type="text" onKeyUp={this.onEnter} />
        </div>
        <hr />
        <ul>
          {this.todos.map((item) => (
            <li key={item.id}>{item.value}</li>
          ))}
        </ul>
      </div>
    )
  }
}

export default App
